<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OpenType writing</title>
    <script type="text/javascript" src="../dist/opentype.js"></script>
    <style>
        body {
            font: 13px Helvetica, arial, freesans, sans-serif;
            line-height: 1.4;
            color: #333;
            margin: 0 0 50px 0;
            padding: 0;
        }
        .container {
            width: 940px;
            margin-left: auto;
            margin-right: auto;
        }
        #glyphs {
            clear: both;
        }
        .wrapper {
            float: left;
            margin: 5px;
            border: 1px solid #ccc;
        }
        .wrapper span {
            text-align: center;
            background: #ddd;
            display: block;
        }
    </style>
</head>
<body>
<div class="container">
    <h1 id="fontFamilyName"></h1>
    <p>This font is generated dynamically in the browser.</p>
    <button onclick="inFont.download()">Download Font</button>

    <div id="glyphs"></div>
</div>

<script>

    var inFont, outFont;

    // Create a canvas and adds it to the document.
    // Returns the 2d drawing context.
    function createGlyphCanvas(glyph, size) {
        var canvasId, html, glyphsDiv, wrap, canvas, ctx;
        canvasId = 'c' + glyph.index;
        html = '<div class="wrapper" style="width:' + size + 'px"><canvas id="' + canvasId + '" width="' + size + '" height="' + size + '"></canvas><span>' + glyph.index + '</span><span>' + glyph.name + '</span><span>U ' + glyph.unicode + '</span></div>';
        glyphsDiv = document.getElementById('glyphs');
        wrap = document.createElement('div');
        wrap.innerHTML = html;
        glyphsDiv.appendChild(wrap);
        canvas = document.getElementById(canvasId);
        ctx = canvas.getContext('2d');
        return ctx;
    }

    opentype.load('../fonts/FiraSansOT-Medium.otf', function (err, font) {
        if (err) {
            console.log(err);
        }
        inFont = font;
        var buffer = inFont.toArrayBuffer();
        outFont = opentype.parse(buffer);
        document.getElementById('fontFamilyName').innerHTML = outFont.names.fontFamily.en;

        for (var i = 0; i < outFont.glyphs.length; i++) {
            var glyph = outFont.glyphs.get(i);
            var ctx = createGlyphCanvas(glyph, 150);
            var x = 50;
            var y = 120;
            var fontSize = 72;
            glyph.draw(ctx, x, y, fontSize);
            glyph.drawPoints(ctx, x, y, fontSize);
            glyph.drawMetrics(ctx, x, y, fontSize);
        }
    });


</script>
</body>
</html>
